<script lang="ts" setup>
import { computed } from 'vue'
import LineArtists from '@/components/common/LineArtists.vue'
import { formatSecond } from '@/utils/format'

import { useSongStoreHook } from '@/store/modules/song'
import { useUserStoreHook } from '@/store/modules/user'

import { _like } from '@/service/song'
const songStore = useSongStoreHook()
const userStore = useUserStoreHook()
defineProps({
  list: Array
})

const indexMethod = (number: number) => {
  return number + 1 > 9
    ? (number + 1).toString()
    : '0' + (number + 1).toString()
}

const ids = computed(() => userStore.likeIds)
const xihuan = (song) => {
  userStore.likeChange(song)
}
const playSong = (row) => {
  songStore.addSong(row)
}
</script>

<template>
  <el-table
    class="mt-2"
    :data="list"
    stripe
    highlight-current-row
    style="width: 100%"
    @row-dblclick="playSong"
  >
    <el-table-column type="index" :index="indexMethod" width="50" />
    <el-table-column label="操作" width="100">
      <template #default="{ row }">
        <i
          :class="ids.includes(row.id) ? 'icon-xindong-' : 'icon-xindong-1'"
          @click="xihuan(row)"
        ></i>
        <i class="icon-xiazai" @click="xihuan(row)"></i>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="标题">
      <template #default="{ row }">
        <div style="width: 100%">
          <span style="color: var(--music-link-hover-color)">{{
            row.name
          }}</span>
          <span v-if="row?.tns">({{ row.tns[0] }})</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="歌手" width="250">
      <template #default="{ row }">
        <LineArtists width="240px" :artists="row.ar" />
      </template>
    </el-table-column>
    <el-table-column prop="al" label="专辑" width="200">
      <template #default="{ row }">
        <div class="ellipsis al_name">{{ row.al.name }}</div>
      </template>
    </el-table-column>
    <el-table-column prop="dt" label="时间" width="80">
      <template #default="{ row }">
        {{ formatSecond(row.dt / 1000) }}
      </template>
    </el-table-column>
  </el-table>
  <div class="list_container mt-2"></div>
</template>

<style lang="scss">
.el-table {
  background-color: transparent;
  color: var(--music-link-color);
  thead {
    color: rga(139, 139, 139);
  }
  tr {
    background-color: transparent;
    border: none;
  }
  .el-table__cell {
    cursor: pointer;
    background-color: rgba(139, 139, 139, 0.05);
  }
  th.el-table__cell {
    background-color: transparent;
  }
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: transparent;
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: rgba(139, 139, 139, 0.1);
}
.el-table__body tr.current-row > td.el-table__cell,
.el-table--striped
  .el-table__body
  tr.el-table__row--striped.current-row
  td.el-table__cell {
  background-color: rgba(139, 139, 139, 0.15);
}

.el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border: none;
}

.al_name {
  width: 190px;
  cursor: pointer;
  &:hover {
    color: var(--music-link-hover-color);
  }
}
.icon-xindong-1,
.icon-xindong-,
.icon-xiazai {
  padding: 0 5px;
  cursor: pointer;
  margin-right: 5px;
  font-size: 18px;
  vertical-align: middle;
  color: var(--music-link-color);
  &:hover {
    color: var(--music-link-hover-color);
  }
}
.icon-xindong- {
  color: $red !important;
}
</style>
